<template>
      <el-card :body-style="{ padding: '1.6rem','border-radius':'1rem'}"  shadow="never" >
         <div class="card-box">
              <div class="card-header">
                  <div class="card-title-label"><span>{{data.level}}</span></div>
                  <span class="card-title">{{data.name}}</span>
              </div>
              <div class="site-text">
                  {{data.area}}
              </div>
                <div class="site-text">
                {{data.address}}
              </div>
              <div class="btn" @click="gotodetail(data)">
                    <span>客户详情</span>
              </div>
         </div>
      </el-card>
</template>

<script>
export default {
  props:{
     data:{
       tyoe:Object,
       default:()=>{}
     }
  },
  methods:{
      gotodetail(data){
        this.$router.push({name:'CustomerDetailsM',params:{id:data.id}})
      }
  }
}
</script>

<style scoped>
.main-box{
    position: relative;
}
.card-box{
    width: 100%;
    min-height: 13rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    flex-direction: column;
}
.card-header{
    width: 100%;
    display: flex;
}
.card-title{
    font-size: 1.3rem;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color:var(--el-color-text-3);
}
.card-title-label{
    padding: 0.2rem 1rem;
    display: flex;
    align-items: center;
    margin-right: 0.8rem;
    background: rgba(255,167,78,0.1);
    border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
    font-size: 1.2rem;
    font-family: Source Han Sans SC-Regular, Source Han Sans SC;
    font-weight: 400;
    color: var(--el-color-primary)
}
.site-text{
    margin-top: 1.6rem;
    font-size: 1.2rem;
    font-family: Source Han Sans SC-Regular, Source Han Sans SC;
    font-weight: 400;
    color:var(--el-color-text-6);
}
.btn{
    width: 8rem;
    height: 3rem;
        margin-top: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
border-radius: 2.75rem 2.75rem 2.75rem 2.75rem;
border: 1px solid var(--el-color-primary);
font-size: 1.2rem;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color: var(--el-color-primary);
}
.btn:active {
    background: var(--el-color-primary);
    color: var(--el-color-primary-light-9);
}

</style>